<template>
  <div v-if="$store.state.user.group == '1'">
    <!--  注册平台 -->
    <el-row>
      <el-col :span="24" :offset="0">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>支持发布的平台</span>
            </div>
          </template>
          <IndexNavs />
          <!-- <div class="card-header mt-5">
            <span>注册用户</span>
          </div>
          <el-divider />
          <IndexUser /> -->
        </el-card>

      </el-col>
    </el-row>

    <!-- 统计分析
    <el-row :gutter="20" class="mt-5">
      <el-col :span="24" :offset="0">
        条形图
        <IndexChart />
      </el-col>
      <el-col :span="12" :offset="0">
          <IndexCard
            title="企业任务指标"
            tip="企业任务指标"
            :btns="goods"
            class="mb-3"
          />
          <IndexCard
            title="部门任务指标"
            tip="部门任务指标"
            :btns="order"
          />
        </el-col>
    </el-row> -->



    <div class="lycontainer">
      <el-scrollbar>
        <div>
          <ly-growcard :loading="showloading" :rows="2" v-model="growData"></ly-growcard>
        </div>
        <div class="echarts-inner">
          <ly-echartcard :loading="showloading" :rows="3" v-model="growData"></ly-echartcard>
        </div>

        <!-- 统计分析
    <el-row :gutter="20" class="mt-5">
      <el-col :span="24" :offset="0">
        条形图
        <IndexChart />
      </el-col>
      <el-col :span="12" :offset="0">
          <IndexCard
            title="企业任务指标"
            tip="企业任务指标"
            :btns="goods"
            class="mb-3"
          />
          <IndexCard
            title="部门任务指标"
            tip="部门任务指标"
            :btns="order"
          />
        </el-col>
    </el-row> -->
      </el-scrollbar>
    </div>
  </div>


  <!-- 个人用户 -->
  <div v-if="$store.state.user.group == '2'">
    <!-- <el-row v-if="$store.state.user.group == '2'">
      <el-col :span="24" :offset="0">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>支持平台</span>
            </div>
          </template>
          <IndexNavs />
        </el-card>

      </el-col>
    </el-row> -->

    <!-- 个人数据 -->
    <div class="lycontainer">
      <el-scrollbar>
        <div>
          <PersonalGrowCard :loading="showloading" :rows="2" v-model="personalData"></PersonalGrowCard>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content ep-bg-purple" />

            <div class="echarts-inner">
              <PersonalEchartcard :loading="showloading" :rows="3" v-model="personalData"></PersonalEchartcard>
            </div>

          </el-col>

          <!-- 排行榜 -->
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light" />
            <div class="wbpro-side">
              <div class="wbpro-side-head">
                <span>浏览排行</span>
              </div>
              <div class="wbpro-side-panel" v-for="(item, index) in personalRank.views_count">
                <span v-if="index == 0"><el-icon color="#FFD700" class="element-icons el-icon-jinpai"></el-icon> <span class="icon jinpai">{{ index + 1 }}</span></span>
                <span class="icon"  v-else-if="index == 1"><el-icon color="#C0C0C0" class="element-icons el-icon-yinpai"></el-icon> <span class="icon yinpai">{{ index + 1 }}</span></span>
                <span class="icon"  v-else-if="index == 2"><el-icon color="#B87333" class="element-icons el-icon-yinpai"></el-icon> <span class="icon tongpai">{{ index + 1 }}</span></span>
                <span class="icon"  v-else></span>
                <span class="title ellipsis">{{ item.media_title }}</span>
                <span class="num">{{ item.views_count?item.views_count:0 }}</span>
                <span class="mark" v-show="index < 3"><el-icon  class="element-icons el-icon-zuixin"></el-icon></span>
              </div>

            </div>


          </el-col>
        </el-row>

      </el-scrollbar>
    </div>
  </div>


  <!-- 企业管理员 -->
  <div v-if="$store.state.user.group == '3'">
    <el-row v-if="$store.state.user.group == '3'">
      <el-col :span="24" :offset="0">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>支持平台</span>
            </div>
          </template>
          <IndexNavs />
          <!-- <div class="card-header mt-5">
            <span>注册用户</span>
          </div>
          <el-divider />
          <IndexUser /> -->
        </el-card>

      </el-col>
    </el-row>

    <!-- 企业数据 -->
    <div class="lycontainer">
      <el-scrollbar>
        <div>
          <CompanyAdminGrowCard :loading="showloading" :rows="2" v-model="companyAdminData"></CompanyAdminGrowCard>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content ep-bg-purple" />

            <div class="echarts-inner">
              <CompanyAdminEchartcard :loading="showloading" :rows="3" v-model="companyAdminData">
              </CompanyAdminEchartcard>
            </div>

          </el-col>

          <!-- 排行榜 -->
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light" />
            <div class="wbpro-side">
              <div class="wbpro-side-head">
                <span>浏览排行</span>
              </div>
              <div class="wbpro-side-panel" v-for="(item,index) in comapnyAdminRank.views_count">
                <span v-if="index == 0"><el-icon color="#FFD700" class="element-icons el-icon-jinpai"></el-icon> <span class="icon jinpai">{{ index + 1 }}</span></span>
                <span class="icon"  v-else-if="index == 1"><el-icon color="#C0C0C0" class="element-icons el-icon-yinpai"></el-icon> <span class="icon yinpai">{{ index + 1 }}</span></span>
                <span class="icon"  v-else-if="index == 2"><el-icon color="#B87333" class="element-icons el-icon-bronze"></el-icon><span class="icon tongpai">{{ index + 1 }}</span></span>
                <span class="icon"  v-else></span>
                <span class="title ellipsis">{{ item.media_title }}</span>
                <span class="num">{{ item.views_count?item.views_count:0 }}</span>
              </div>

            </div>


          </el-col>
        </el-row>

      </el-scrollbar>
    </div>
  </div>

    <!-- 企业员工 -->
    <div v-if="$store.state.user.group == '4'">
    <el-row v-if="$store.state.user.group == '4'">
      <el-col :span="24" :offset="0">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>支持平台</span>
            </div>
          </template>
          <IndexNavs />
          <!-- <div class="card-header mt-5">
            <span>注册用户</span>
          </div>
          <el-divider />
          <IndexUser /> -->
        </el-card>

      </el-col>
    </el-row>

    <!-- 企业数据 -->
    <div class="lycontainer">
      <el-scrollbar>
        <div>
          <CompanyStaffGrowCard :loading="showloading" :rows="2" v-model="companyStaffData"></CompanyStaffGrowCard>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content ep-bg-purple" />

            <div class="echarts-inner">
              <CompanyStaffEchartcard :loading="showloading" :rows="3" v-model="companyStaffData">
              </CompanyStaffEchartcard>
            </div>

          </el-col>

          <!-- 排行榜 -->
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light" />
            <div class="wbpro-side">
              <div class="wbpro-side-head">
                <span>浏览排行</span>
              </div>
              <div class="wbpro-side-panel" v-for="(item,index) in comapnyStaffRank.views_count">
                <span v-if="index == 0"><el-icon color="#FFD700" class="element-icons el-icon-jinpai"></el-icon> <span class="icon jinpai">{{ index + 1 }}</span></span>
                <span class="icon"  v-else-if="index == 1"><el-icon color="#C0C0C0" class="element-icons el-icon-yinpai"></el-icon> <span class="icon yinpai">{{ index + 1 }}</span></span>
                <span class="icon"  v-else-if="index == 2"><el-icon color="#B87333" class="element-icons el-icon-bronze"></el-icon><span class="icon tongpai">{{ index + 1 }}</span></span>
                <span class="icon"  v-else><el-icon color="black" class="element-icons el-icon-bronze"></el-icon>{{ index + 1 }}</span>
                <span class="title ellipsis">{{ item.media_title }}</span>
                <span class="num">{{ item.views_count?item.views_count:0 }}</span>
                <span class="mark" v-show="index < 3"><el-icon  class="element-icons el-icon-zuixin"></el-icon></span>
              </div>

            </div>


          </el-col>
        </el-row>

      </el-scrollbar>
    </div>
  </div>


  <GuideIntro 
    v-if="showGuide" 
    ref="guideRef"
    @guide-completed="handleGuideComplete"
  />
</template>

<script setup>
// vue
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import GuideIntro from '~/components/GuideIntro.vue'

import LyGrowcard from "~/components/growCard.vue"
import PersonalGrowCard from "~/components/personalGrowCard.vue"
import CompanyAdminGrowCard from "~/components/companyAdminGrowCard.vue"
import CompanyStaffGrowCard from "~/components/companyStaffGrowCard.vue"
import LyEchartcard from "~/components/echartCard.vue"
import PersonalEchartcard from "~/components/personalEchartCard.vue"
import CompanyAdminEchartcard from "~/components/companyAdminEchartcard.vue"
import CompanyStaffEchartcard from "~/components/companyStaffEchartcard.vue"

import IndexNavs from "~/pages/home/components/IndexNavs.vue"
import IndexUser from "~/pages/home/components/IndexUser.vue"
import IndexChart from "~/pages/home/components/IndexChart.vue"

// api
import { getPlatefromAll } from "~/api/platefrom/index"
import { getHomeIndexByAdmin, getHomeIndexByPersonal, getHomeIndexByCompanyAdmin, getHomeIndexByCompanyStaff } from "~/api/home/index"

const guideRef = ref(null)

const store = useStore()

const showloading = ref(true)
const growData = ref()

// 个人信息
const personalData = ref()
const personalRank = ref({})

// 公司管理员信息
const companyAdminData = ref()


const comapnyAdminRank = ref({})


// 公司员工信息
const companyStaffData = ref()


const comapnyStaffRank = ref({})

const echartsData = ref([])
const platfromList = ref([])
const homeData = ref({})

// Add guide state
const showGuide = ref(true)

const handleGuideComplete = () => {
  showGuide.value = false
  localStorage.setItem('guideCompleted', 'true')
}

onMounted(() => {
  
  setTimeout(() => {
    showloading.value = false
      // Check if user has seen the guide before
    showGuide.value = !localStorage.getItem('guideCompleted')
    guideRef.value.startGuide()
  }, 1200)

  // 获取平台信息
  getPlatefromAll({}).then((res) => {
    platfromList.value = res.data
  })

  // 获取首页数据
  if (store.state.user.group == '1') {
    getHomeIndexByAdmin({}).then((res) => {
      homeData.value = res.data

      growData.value[0].nums = homeData.value.medias_release_count
      growData.value[0].totalnums = homeData.value.medias_release_all_count
      growData.value[1].nums = homeData.value.user_auth_count
      growData.value[1].totalnums = homeData.value.user_count
      growData.value[2].nums = homeData.value.platefrom_sku_count
      growData.value[2].totalnums = homeData.value.platefrom_sku_count
      growData.value[3].nums = homeData.value.sku_user_count
      growData.value[3].totalnums = homeData.value.sku_user_count

    })
  } else if (store.state.user.group == '2') {
    getHomeIndexByPersonal({}).then((res) => {
      homeData.value = res.data
      personalData.value = res.data.personalData
      personalData.value.forEach(item => {
        platfromList.value.forEach(e =>{
          if(item.platform_name == e.en_name){
            item.icon = e.icon
          }
        })
      });

      personalRank.value.collect_count = homeData.value.collect_count
      personalRank.value.likes_count = homeData.value.likes_count
      personalRank.value.views_count = homeData.value.views_count

    })
  } else if (store.state.user.group == '3') {
    getHomeIndexByCompanyAdmin({}).then((res) => {
      homeData.value = res.data
      companyAdminData.value = res.data.companyAdminData
      companyAdminData.value.forEach(item => {
        platfromList.value.forEach(e =>{
          if(item.platform_name == e.en_name){
            item.icon = e.icon
          }
        })
      });

      comapnyAdminRank.value.collect_count = homeData.value.collect_count
      comapnyAdminRank.value.likes_count = homeData.value.likes_count
      comapnyAdminRank.value.views_count = homeData.value.views_count

    })
  } else if (store.state.user.group == '4') {
    getHomeIndexByCompanyStaff({}).then((res) => {
      homeData.value = res.data
      companyStaffData.value = res.data.companyStaffData
      companyStaffData.value.forEach(item => {
        platfromList.value.forEach(e =>{
          if(item.platform_name == e.en_name){
            item.icon = e.icon
          }
        })
      });

      comapnyStaffRank.value.collect_count = homeData.value.collect_count
      comapnyStaffRank.value.likes_count = homeData.value.likes_count
      comapnyStaffRank.value.views_count = homeData.value.views_count

    })
  }

})
</script>
<style lang="scss" scoped>
.lycontainer {
  margin-top: 20px;
  width: 100%;
  // height: calc(100vh - 130px); //动态计算长度值
  /*overflow-x: hidden;*/
  /*overflow-y:auto;*/
}

.echarts-inner {
  margin-top: 1px;
}

::v-deep(.el-scrollbar__bar.is-horizontal) {
  display: none;
}

.wbpro-side {
  width: 100%;
  height: 350px;
  background-color: #fff;
  padding: 10px 15px;
}

.wbpro-side .wbpro-side-head {
  height: 40px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 18px;
}

.wbpro-side .wbpro-side-panel {
  height: 40px;
  border-bottom: 1px solid #f9f9f9;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.wbpro-side-panel  span.title {
  flex-grow: 1;
}

.wbpro-side-panel span span.icon {
  font-size: 16px;
  font-weight: bold;
  color: □#ff9406;
  margin-right: 10px;
}
.jinpai{
  color: #FFD700;
}
.yinpai{
  color: #C0C0C0;
}
.tongpai{
  color: #B87333;
}
.wbpro-side-panel > span.mark {
  color: red ;
  padding: 2px 4px;
  border-radius: 5px;
  margin-left: 0px;
}

// .wbpro-side-panel:nth-child(-n+4) span.icon {
//   color: red;
// }

.wbpro-side-panel:nth-child(-n+3) {
  //n>8的整数 1-5
  // background-color: aqua;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>